﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="CanvasVectors.js"></script>
</head>
<body>
    <canvas id="c" style="border:2px solid black;background-color:beige;" width="600" height="400" onmousedown="onClick(event)">

    </canvas>
    <script type="text/javascript">

        
        var scene = new Scene("c");

        
        var area = new Area("Biroul 1");
        var c = new BezierCurve({ x: 100, y: 100 }, { x: 120, y: 150 }, { x: 220, y: 150 }, { x: 200, y: 100 });
        area.add(c);
        c = new BezierCurve({ x: 100, y: 100 }, { x: 120, y: 50 }, { x: 220, y: 50 }, { x: 200, y: 100 });
        area.add(c);
        scene.add(area);

        var area = new Area("Biroul 2");
        var c = new BezierCurve({ x: 100, y: 300 }, { x: 120, y: 350 }, { x: 220, y: 350 }, { x: 200, y: 300 });
        area.add(c);
        c = new BezierCurve({ x: 100, y: 300 }, { x: 120, y: 250 }, { x: 220, y: 250 }, { x: 200, y: 300 });
        area.add(c);
        scene.add(area);

        

        scene.refresh();

        //canvas.addEventListener("mousedown", onClick, false);
        function onClick(event) {
            var x = event.x;
            var y = event.y;

            var canvas = scene.canvas;            
            x -= canvas.offsetLeft;
            y -= canvas.offsetTop;

            var area = scene.getAreaAtPosition({ x: x, y: y });
            if(area)
                alert(area.name);
            else
                alert("no area");            
        }
    </script>

</body>
</html>
